<template>
	<!-- :customStyle="{bottom:'105px'||0}" -->
	<u-popup :show="show" bgColor="rgba(0,0,0,0)" @close="closeMore">
		<view class="popup_con">
			<view class="fixedTitle_oblation">
				<view class="left"></view>
				<view class="middle">添香油</view>
				<view class="right">
					<u-icon
						@click="closeMore"
						class="close"
						name="close"
						color="black"
						size="20"
					></u-icon>
				</view>
			</view>
			<view class="addOil">
				<view
					class="addOil_item"
					@click="setIndex(item, index)"
					v-for="(item, index) in list"
				>
					<image
						class="addOil_item_bgc"
						:src="
							index == activeIndex
								? 'http://112.124.50.179:8888/imgs/home/addOil1.png'
								: 'http://112.124.50.179:8888/imgs/home/addOil2.png'
						"
						mode=""
					></image>
					<view style="z-index: 2">{{ item.name }}</view>
					<view class="display_flex coinBox">
						<view>{{ item.price }}</view>
						<image
							class="coin"
							src="http://112.124.50.179:8888/imgs/home/coin.png"
							mode=""
						></image>
					</view>
				</view>
			</view>
		</view>
		<Footer
			@sendHeight="sendHeight"
			:type="'oblation'"
			:buyList="buyList"
			:offeringType="4"
			@queryParent="queryParent"
			@buy="buy"
			btnName="购买"
			:isShow="false"
		/>
		<!-- <Equip ref='EquipRef' :bottom_height='bottom_height' /> -->
	</u-popup>
</template>

<script setup>
import _ from 'lodash';
import { defineEmits, onMounted, ref, watch } from 'vue';
import Footer from '@/subPages/common/footer.vue';
import { onReady, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import Equip from './equip.vue';
import HomeApi from '@/API/home';

const homeApi = new HomeApi();
const emit = defineEmits(['query', 'finish']);
const show = ref(false);
const activeIndex = ref();
const buyList = ref([]);

const EquipRef = ref();
const setIndex = (item, index) => {
	activeIndex.value = index;
	buyList.value = [item];
};
let height = ref(0);
let bottom_height = ref(0);
const list = ref([]); //香油列表

const queryParent = () => {
	emit('query');
};
const sendHeight = (e) => {
	bottom_height.value = e + 'px';
};
const closeMore = () => {
	show.value = false;
};
const openEquip = (e) => {
	EquipRef.value.show = e;
};

watch(show, (newVal) => {
	if (newVal) {
		//获取香油列表
		getList();
	}
});

/**
 * 获取香油
 */
const getList = async () => {
	let res = await homeApi.getHallOilList();
	if (res.code === 0) {
		list.value = res.data.items;
	}
};

/**
 * 购买香油
 */
const buy = _.debounce(
	async (buyList) => {
		let res = await homeApi.oilHall({
			addId: buyList[0].id,
			hallId: uni.getStorageSync('hallId')
		});
		if (res.code === 0) {
			uni.showToast({
				title: '添加香油成功'
			});
			show.value = false;
			emit('finish');
		}
	},
	1000,
	{ leading: true, trailing: false }
);

defineExpose({
	show
});
</script>

<style lang="scss">
::v-deep.u-popup__content {
	padding: 0 !important;
}

.popup_con {
	position: relative;
	background: linear-gradient(180deg, rgba(255, 234, 195, 0.4) 0%, rgba(255, 255, 255, 0) 100%),
		#ffffff;
	border-radius: 32rpx 32rpx 0 0;
}

.fixedTitle_oblation {
	width: 100%;
	font-size: 32rpx;
	color: #156778;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left,
	.right {
		width: 100rpx;
		flex-shrink: 0;
	}

	.right {
		display: flex;
		justify-content: flex-end;
		padding-right: 32rpx;
		box-sizing: border-box;
	}

	.middle {
		flex: 1;
		text-align: center;
	}
}

.close {
	width: 48rpx;
	height: 48rpx;
}

.addOil {
	width: 100%;
	height: 900rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 24rpx;

	.addOil_item {
		margin-bottom: 20rpx;
		width: 436rpx;
		height: 114rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		font-size: 32rpx;
		color: #156778;
		line-height: 32rpx;
		padding: 0 52rpx;
		box-sizing: border-box;

		&:last-child {
			margin-bottom: 0;
		}

		.addOil_item_bgc {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.coinBox {
			justify-content: space-between;
			text-align: right;
			z-index: 2;

			.coin {
				width: 26rpx;
				height: 26rpx;
				margin-left: 8rpx;
				z-index: 2;
			}
		}
	}
}
</style>
